<template>
	<div id="list">
		<header class="mui-bar mui-bar-nav">
			<h1 class="mui-title">发现</h1>
			<span class="erw"><img src="../assets/images/list/erw.png"/></span>
		</header>
		<div class="condition">
			<div class="tabs">
				<div class="hover">最新产品<span class="line"></span></div>
				<div class="nothover">最近浏览</div>
			</div>
			<div class="menu">
				<span class="open" id="money">金额</span>
				<span class="open" id="time">贷款时间</span>
				<span class="open" id="type">贷款类型</span>
			</div>
		</div>

		<div class="cover"></div>
		<div class="money">
			<div class="checked">不限</div>
			<div class="check">0-5千</div>
			<div class="check">5千-1万</div>
			<div class="check">1万-3万</div>
			<div class="check">3万-5万</div>
		</div>
		<div class="time">

		</div>
		<div class="type">
			<div class="checked">小额单期</div>
			<div class="check">普通分期</div>
			<div class="check">大额分期</div>
			<div class="check">信用卡代还</div>
		</div>
		<!--下拉刷新容器-->
		<div id="refreshContainer" class="mui-content">
			<!--数据列表-->
			<ul class="mui-table-view mui-table-view-chevron" id="products">
				<li class="mui-table-view-cell mui-media item"  v-for="item in list">
					<div class="top">
						<div class="left">
							<img :src="item.logo" />
						</div>
						<div class="center">
							<div>{{item.productName}}
								<span class="lable" v-show="item.highLight!=''">{{item.highLight}}</span>
							</div>
							<p>信用卡</p>
						</div>
						<div class="right" @click="gotoDetail(item)">
							查看
						</div>
					</div>
					<div class="bottom">
						<div>
							<p>额度范围(元)</p>
							<p>{{item.loanLimit}}</p>
						</div>
						<div>
							<p>贷款期限</p>
							<p>1-12月</p>
						</div>
						<div>
							<p>日利息</p>
							<p>{{item.loanRate}}</p>
						</div>
					</div>
					<div class="bg"></div>
				</li>
				
				<!--<li class="mui-table-view-cell mui-media item">
					<div class="top">
						<div class="left">
							<img src="../assets/images/demo/c7.png" />
						</div>
						<div class="center">
							<div>小黑鱼<span class="lable">热门</span></div>
							<p>信用卡</p>
						</div>
						<div class="right">
							查看
						</div>
					</div>
					<div class="bottom">
						<div>
							<p>额度范围(元)</p>
							<p>2000-20000</p>
						</div>
						<div>
							<p>贷款期限</p>
							<p>1-12月</p>
						</div>
						<div>
							<p>日利息</p>
							<p>0.016%</p>
						</div>
					</div>
				</li>
				<div class="bg"></div>
				<li class="mui-table-view-cell mui-media item">
					<div class="top">
						<div class="left">
							<img src="../assets/images/demo/c7.png" />
						</div>
						<div class="center">
							<div>小黑鱼<span class="lable">热门</span></div>
							<p>信用卡</p>
						</div>
						<div class="right">
							查看
						</div>
					</div>
					<div class="bottom">
						<div>
							<p>额度范围(元)</p>
							<p>2000-20000</p>
						</div>
						<div>
							<p>贷款期限</p>
							<p>1-12月</p>
						</div>
						<div>
							<p>日利息</p>
							<p>0.016%</p>
						</div>
					</div>
				</li>
				<div class="bg"></div>
				<li class="mui-table-view-cell mui-media item">
					<div class="top">
						<div class="left">
							<img src="../assets/images/demo/c7.png" />
						</div>
						<div class="center">
							<div>小黑鱼<span class="lable">热门</span></div>
							<p>信用卡</p>
						</div>
						<div class="right">
							查看
						</div>
					</div>
					<div class="bottom">
						<div>
							<p>额度范围(元)</p>
							<p>2000-20000</p>
						</div>
						<div>
							<p>贷款期限</p>
							<p>1-12月</p>
						</div>
						<div>
							<p>日利息</p>
							<p>0.016%</p>
						</div>
					</div>
				</li>-->
			</ul>
			<div style="background-color: #f5f5f5;">
				<divider>
					<div class="driver"><img src="../assets/images/common/bottom.png" /></div>
				</divider>
			</div>
		</div>
		<div class="footer">
			<div class="footer-item footer-item-active" @click="gotoPage('index')">
				<span class="mui-icon-house"></span>
				<span class="footer-tab-label">首页</span>
			</div>
			<div class="footer-item" @click="gotoPage('list')">
				<span class="mui-icon-discover mui-icon-discover-active" style="left: 40.5%;"></span>
				<span class="footer-tab-label footer-tab-label-active">发现</span>
			</div>
			<!--<div class="footer-item" @click="gotoPage('news')">
				<span class="mui-icon-list"></span>
				<span class="footer-tab-label">资讯</span>
			</div>-->
			<div class="footer-item" @click="gotoPage('mine')">
				<span class="mui-icon-my"></span>
				<span class="footer-tab-label">我的</span>
			</div>
		</div>
	</div>
</template>

<script>
	import { Marquee, MarqueeItem, Divider } from 'vux'
	import libs from "@/assets/js/libs";
	import rules from '@/assets/js/rules';

	export default {
		data(){
			return {
				list:[],
			}
		},
		components: {
			Divider,
		},

		mounted() {
			//获取列表数据
			libs.request({
				url: `/product/list/0`,
				method: 'post',
			}).then(res => {
				console.log(res);
				this.list = res;
				console.log(list);
			});
		},

		methods: {
			gotoPage(url) {
				//判断是否登录
				this.$router.push({
					name: url
				});
			},	
			gotoDetail(obj){
		      console.log(obj);
//		      if(obj.showDetail){
		      	this.$router.push({
					name: 'detail',
					params: { id: obj.id },
				});
//		      }else{
//		      	window.location.href=obj.url
//		      }
			}
		}
	};
</script>
<style lang="scss">
	@import "../assets/css/funcs.scss";
	@import '../assets/css/common.scss';
	#list {
		.condition {
			width: 100%;
			background: #fff;
			.tabs {
				background: white;
				height: pxToRem(78px);
				line-height: pxToRem(78px);
				position: relative;
				margin-top: 45px;
				border-bottom: 1px solid #F4F4F4;
				padding-left: 5px;
				.hover,
				.nothover {
					width: 20%;
					text-align: center;
					height: pxToRem(78px);
					line-height: pxToRem(78px);
					float: left;
					font-size: pxToRem(29px);
					margin-right: 3%;
				}
				.tabs>div:first-child:after {
					position: relative;
				}
				.hover {
					width: 20%;
					text-align: center;
					color: #FCA203;
					position: relative;
					top: 1px;
				}
				.line {
					width: 50%;
					position: relative;
					top: -2px;
					border-bottom: 1px solid #FCA203;
					display: block;
					margin-left: 20%;
				}
			}
			.menu {
				font-size: pxToRem(27px);
				color: #666666;
				color: #666666;
				height: pxToRem(78px);
				line-height: pxToRem(78px);
				background-color: #fff;
				border-bottom: 1px solid #f5f5f5;
				.close,
				.open {
					background-repeat: no-repeat;
					background-position: right;
					display: block;
					float: left;
					text-align: left;
					padding-right: 20px;
					background-size: 16px;
					margin-right: 38px;
				}
				.close {
					background-image: url(../assets/images/list/up.png);
				}
				.open {
					background-image: url(../assets/images/list/down.png);
				}
			}
		}
		.erw {
			float: right;
			display: block;
			height: 45px;
			width: 45px;
			img {
				width: 100%;
			}
		}
		.menu>span:first-child {
			margin-left: 15px;
		}
		.mui-content {
			background-color: #f5f5f5;
			padding-bottom: 100px;
		}
		.mui-table-view:before,
		.mui-table-view:after {
			background-color: transparent;
		}
		.mui-table-view-cell:after {
			background-color: transparent;
		}
		.bg {
			height: 9px;
			margin: auto;
			background-color: #F5F5F5;
		}
		#products {
			margin-top: -44px;
			.item {
				height: 128px;
				padding: 0;
				.top {
					height: 70px;
					position: relative;
					border-bottom: 1px solid #F5F5F5;
					width: 92%;
					margin: auto;
					.left,
					.center,
					.right {
						position: relative;
						top: 15px;
					}
					.left {
						line-height: 40px;
						max-width: 40px;
						height: 40px;
						border-radius: 4px;
						float: left;
						img {
							width: 100%;
						}
					}
					.center {
						float: left;
						margin-left: 10px;
						margin-top: 1px;
						div {
							color: #000;
							font-size: pxToRem(29px);
							.lable {
								border: 1px solid #FF8800;
								border-radius: 4px;
								font-size: 0.53125rem;
								color: #FF8800;
								margin-left: 5px;
								padding: 1px 5px;
								font-size: 12px;
								position: relative;
								top: -1px;
							}
						}
						p {
							color: #999999;
							font-size: pxToRem(23px);
							position: relative;
							top: -3px;
						}
					}
					.right {
						background-color: #FE9601;
						font-size: pxToRem(25px);
						color: #fff;
						width: pxToRem(98px);
						height: pxToRem(48px);
						line-height: pxToRem(48px);
						text-align: center;
						border-radius: 4px;
						position: relative;
						top: 28px;
					}
				}
				.bottom {
					position: relative;
					display: flex;
					justify-content: space-between;
					width: 92%;
					height: 58px;
					margin: auto;
					div {
						margin-top: 7px;
						p:first-child {
							color: #000000;
							font-size: pxToRem(25px);
							text-align: center;
						}
						p:last-child {
							color: #FF8800;
							font-size: pxToRem(23px);
							text-align: center;
						}
					}
				}
			}
		}
		.driver {
			width: 20%;
			img {
				width: 58px;
				height: 16px;
			}
		}
		.vux-divider {
			width: 72%;
			margin: auto;
			margin-top: 5px;
		}
		.cover {
			background-color: rgba(0, 0, 0, 0.6);
			height: 100%;
			width: 100%;
			position: absolute;
			top: 0;
			z-index: 3;
			display: none;
		}
		.money,
		.type {
			position: absolute;
			top: 110px;
			background-color: #fff;
			z-index: 3;
			height: 102px;
			width: 100%;
			margin: auto;
			font-size: pxToRem(25px);
			padding-left: 3%;
			padding-top: 5px;
			display: none;
			div {
				height: 23px;
				line-height: 23px;
				text-align: center;
				float: left;
				width: 29%;
				margin-left: 2%;
				margin-top: 15px;
				border-radius: 4px;
			}
			.check {
				color: #666666;
				border: 1px solid #CCCCCC;
			}
			.checked {
				color: #FF8800;
				border: 1px solid #FF8800;
			}
		}
	}
</style>